<button mat-button id="file-browser-close-btn" class="close-button" mat-dialog-close
  matTooltip="Close">&#x2573;</button>
<mat-form-field class="form-field long" appearance="outline">
  <input matInput appearance="outline" [ngModel]="currentPath" (change)="currentPathChange($event)">
</mat-form-field>
<button mat-icon-button id="file-browser-go-to-parent-btn" class="parent-dir" (click)="goToParentDirectory()"
  matTooltip="Go to parent directory">
  <img src="./../../assets/077-arrow-up.svg">
</button>
<button mat-raised-button id="file-browser-choose-btn" class="confirm" color="accent" [disabled]="!chosenFile"
  (click)="chooseFile(chosenFile, true)" matTooltip="Save selection" [disabled]="showSpinner">Choose</button>
<br>
<div class="file-container">
  <ng-container *ngFor="let item of contents">
    <p *ngIf="item.type === 'directory'">
      <button id="file-browser-directory-btn" [ngClass]="{'chosen': item.name === chosenFile, 'file-button':true}"
        (click)="chooseFile(item.name, false)" (dblclick)="getFileSystem(item.name)">
        <img *ngIf="item.is_model" src="./../../assets/model-folder.svg">
        <img *ngIf="!item.is_model" src="./../../assets/050a-folder-solid.svg">
        {{ item.name.replace(currentPath + '/', '') }}
      </button>
    </p>
  </ng-container>
  <ng-container *ngFor="let item of contents">
    <p *ngIf="item.type === 'file'">
      <button id="file-browser-file-btn" [ngClass]="{'chosen': item.name === chosenFile, 'file-button':true}"
        (dblclick)="chooseFile(item.name, true)" (click)="chooseFile(item.name, false)">
        <img *ngIf="item.is_model" src="./../../assets/model-file.svg">
        <img *ngIf="!item.is_model" src="./../../assets/145b-document-outlined.svg">
        {{ item.name.replace(currentPath + '/', '') }}
      </button>
    </p>
  </ng-container>
</div>
<mat-spinner style="margin:0 auto;" mode="indeterminate" class="big-spinner-center"
  [style.display]="showSpinner ? 'block' : 'none'">
</mat-spinner>